<template>
  <div class="m-2 p-2 flex items-center bg-gray-50 rounded-lg">
    <div class="flex w-80 text-sm font-medium text-gray-700 items-center">
      <span>{{ label }}</span>
      <el-tooltip v-if="desc" :content="desc" placement="top">
        <el-icon class="ml-1 cursor-help"><QuestionFilled /></el-icon>
      </el-tooltip>
    </div>
    <div class="min-w-0 flex-1">
      <el-select v-if="component==='select'" v-model="inputValue" class="w-40">
        <el-option v-for="(item,index) in enumList" :key=index :label="item.label" :value="item.value"></el-option>
      </el-select>

      <el-date-picker v-if="component==='date-picker'"
                      v-model="inputValue"
                      :format="format"
                      :placeholder="placeholder"
                      :value-format="valueFormat"
                      :type="type"
      />

      <div v-if="component==='address'" class="flex flex-col">
        <el-input v-model="inputValue.addressCountry" :placeholder="t('国家')" class="mt-2"/>
        <el-input v-model="inputValue.postalCode" :placeholder="t('邮编')" class="mt-2"/>
        <el-input v-model="inputValue.streetAddress" :placeholder="t('街道地址')"/>
      </div>

      <UploadCmp v-if="component==='file'" v-model="inputValue"></UploadCmp>

      <div v-if="component==='table'">
        <DynamicTable v-model="inputValue" :columns="columns" :default-item="defaultItem"/>
      </div>

      <div v-if="component==='textarea'" class="flex-1">
        <el-input v-model="inputValue" rows="3" type="textarea"/>
      </div>

      <div v-if="component==='value-with-date'">
        <el-input v-model="inputValue.value" :placeholder="placeholder" type="number"></el-input>
      </div>

      <div v-if="component==='CustomNumber'">
        <el-input v-model="inputValue" :placeholder="placeholder" type="number">
          <template #suffix>
            {{ unit }}
          </template>
        </el-input>
      </div>

      <div v-if="!component || component==='string'" class="w-120">
        <el-input v-model="inputValue" :placeholder="placeholder" :type="type">
          <template #suffix>
            {{ unit }}
          </template>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed} from 'vue'
import DynamicTable from "@/views/BatteryPassport/components/DynamicTable.vue";
import UploadCmp from "@/components/UploadCmp.vue";
import {QuestionFilled} from "@element-plus/icons-vue";
import {useI18n} from "vue-i18n";

const {t} = useI18n()
const props = defineProps({
  label: String,
  desc: String,
  modelValue: [String, Number],
  placeholder: String,
  enumList: {
    type: Array,
    default: null,
  },
  unit: String,
  component: String,
  format: String,
  valueFormat: String,
  type: {
    type: String,
    default: 'text'
  },


  columns: {
    type: Array,
  },
  defaultItem: null
})

const emit = defineEmits(['update:modelValue'])

const inputValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleInput = (value) => {
  emit('update:modelValue', value)
}
</script>

<style scoped>
@reference "tailwindcss";

:deep(.el-input) {
  @apply w-80;
}

:deep(.el-select) {
  @apply w-80;
}
</style>